<template>
    <div>
        <mian-layout @refresh="resetForm">
            <template v-slot:conTop>
                <el-form size="mini" :inline="true" :model='search' ref="search_data" class="demo-form-inline search-form">
                    <el-form-item label="年度" prop="settleYear">
                        <el-date-picker v-model="search.settleYear" :picker-options="pickerOptions" type="year" placeholder="选择年份" value-format="yyyy" @change="doSearch"/>
                    </el-form-item>
                </el-form>   
            </template>

            <my-table :loading="loading" :lists="tableData">
                <el-table-column property="settleDateMonth" label="月份" align='center'></el-table-column>
                <el-table-column property="settleAmount" label="收入金额" align='center'>
                    <template slot-scope="scope">
                        <span>{{scope.row.settleAmount.amount}}</span>
                    </template>
                </el-table-column>
                <el-table-column property="createTime" label="核算时间" align='center'>
                    <template slot-scope="scope">
                        <span>{{scope.row.createTime}}</span>
                    </template>
                </el-table-column>
                
                
                <el-table-column prop="operation" align='center' label="操作" width="200">
                    <template slot-scope='scope'>
                        <el-button size="mini" icon="el-icon-search" @click="lookDetails(scope.row)">查看明细</el-button>
                    </template>
                </el-table-column>

            </my-table>
        </mian-layout>
    </div>
</template>
<script>
import {mapGetters} from "vuex"
import myTable from '@/components/public/myTable';
import myDialog from '@/components/public/myDialog';
import {
  settle_list,
  coupon_send
} from '@/api/arApi'
export default {
    components:{
      myTable,
      myDialog
    },
    data(){
        return{
            search:{
                settleYear:new Date().getFullYear().toString()
            },
            pickerOptions:{
                disabledDate:(time)=>{
                    const year = new Date(time).getFullYear()
                    const curYear = new Date().getFullYear().toString()
                    return curYear<=year-1
                }
            },
            loading:true,
            tableData:[],
        }
    },
    computed:{
        ...mapGetters({
            'userInfo':'user/userInfo'
        })
    },
    created(){
        this.getList()
    },
    methods:{
        doSearch(){
            this.pageIndex = 1
            this.getList()
        },
        getList(){ 
            this.loading = true
            settle_list(this.search).then(res=>{
                this.loading = false
                this.tableData = res.data
            })
        },
        lookDetails(item) {
            this.$router.push(`/settle/detail?date=${this.search.settleYear}-${item.settleDateMonth}`)
        },

        resetForm(){
           this.search.settleYear = new Date().getFullYear().toString()
           this.getList()
        }
    }
}
</script>